import React, { Component } from 'react';
import { NavBar, Icon, Drawer, List, Tabs, Grid} from 'antd-mobile';
import './index.module.scss'
import { getcountry } from './../../api'

class Com extends Component {
  state = {
    docked: true,
    // 导航栏内容
    countrylist: [],
    // 左侧列表内容
    citylist: [],
    citycopy: [],
    countryid: 1,
    provinceid: 0
  }
  
  componentDidMount(){
    getcountry({
      countryid: 1,
      provinceid: 0
    }).then(res=>{
      const countries = res.data.data.countries
      countries.map(item=>{
        return item.title = item.countryname
      })
      this.setState({
        countrylist: countries,
        citylist: res.data.data.provinces,
        citycopy: res.data.data.cities
      })
    })
  }
  render() {
    const sidebar = (<List>
      {this.state.citylist.map(i => {
        return (<List.Item key={i.provinceid} onClick={()=>{
          // console.log(i)
          getcountry({
            countryid: this.state.countryid,
            provinceid: i.provinceid
          }).then(res=>{
            this.setState({
              citycopy: res.data.data.cities
            })
          })
        }}
        >{ i.provincename }</List.Item>);
      })
      }
    </List>);
    const data = this.state.citycopy.map((item) => ({
      icon: `${item.img}`,
      text: `${item.cityname}`,
      id:　`${item.cityid}`
    }));
    return (
      <div className='box'>
        {/* 头部 */}
        <header className='header'>
          <NavBar
            mode="light"
            // icon={<Icon type={require('./../../left.svg')} />}
            icon={ <span className="iconfont icon-fanhui" style={{ fontSize: '0.23rem', color: '#00B145' }}></span>}
            onLeftClick={() => {
              this.props.history.go(-1)
            }}
            rightContent={[
              <Icon key="0" type="search" color='#00B145' style={{ marginRight: '0.13rem' }} />
            ]}
            >推荐锦囊
          </NavBar>
        </header>
        <div className='content'>
          {/* 导航栏 */}
            <Tabs tabs={this.state.countrylist} 
                  animated={false}
                  useOnPan={false}
                  initialPage={0}
                  onChange={(TabData) => {
                    // console.log(TabData)
                    const num = TabData.id
                    getcountry({
                      countryid: num,
                      provinceid: 0
                    }).then(res=>{
                      this.setState({
                        countryid: num,
                        citylist: res.data.data.provinces,
                        citycopy: res.data.data.cities
                      })
                    })
                  }}
                  >
                    {/* 左侧选栏 */}
                    <Drawer
                    className="my-drawer"
                    style={{  position: 'relative', left: 0, height:'100%', backgroundColor: '#fff' }}
                    contentStyle={{ color: '#A6A6A6', textAlign: 'center', paddingTop: '0.15rem' }}
                    sidebarStyle={{ border: '1px solid #ddd', width: '1.0rem',textAlign: 'center'}}
                    sidebar={sidebar}
                    docked={this.state.docked}
                  >
                    {/* 右侧部分渲染内容 */}
                    <div>
                    <Grid data={data}
                          columnNum={2}
                          itemStyle={{  width: '1.5rem', height: '1.7rem',textAlign: 'center', marginBottom:'0.1rem' }}
                          renderItem={dataItem => (
                            <div onClick={
                              ()=>{
                                this.props.history.push({pathname: '/sillbag/country', state: {cityid:dataItem.id}})
                                sessionStorage.setItem('cityid', dataItem.id)
                              }
                            }>
                              <img src={dataItem.icon} style={{ width: '1.25rem', height: '1.45rem' }} alt="" />
                              <div style={{ color: '#888', fontSize: '14px', textAlign:'left', paddingLeft: '5PX'}}>
                              <span>{dataItem.text}</span>
                              </div>
                            </div>
                          )}/>
                    </div>
                    </Drawer>
            </Tabs>
        </div>
      </div>
    );
  }
}

export default Com
